<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <style>
        .layui-table-cell {
            height: 60px;
            line-height: 60px;
        }
        /* height: auto !important;
          white-space: normal;
          padding: 0px;
      } */

        th .layui-table-cell {
            height: 30px;
            line-height: 30px;
        }

        th .laytable-cell-1-0-7 {
            height: 30px;
            line-height: 30px;
        }

        .layui-table img {
            width: 100px;
            height: 60px;
        }
    </style>

</head>
<body>
    <fieldset class="table-search-fieldset">  
    <!-- 数据表格 数据由js动态渲染-->
    <table  id="roomTable" lay-filter="test"></table>
</body>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<!-- 这里的 checked 的状态只是演示 -->
<script type="text/html" id="picTpl">
    <img src="{{d.pic}}" name="pic" alt="" style="width: 100%; height: 100%;">
</script>

<script type="text/html" id="titleTpl">
    {{# if(d.roomStatus == '闲置'){ }}
    <span style="color: #08e363;">{{ d.roomStatus }}</span>
    {{# } else if(d.roomStatus == '已预订') { }}
    <span style="color: #3406ee;">{{ d.roomStatus }}</span>
    {{# } else if(d.roomStatus == '入住') { }}
    <span style="color: #f608bf;">{{ d.roomStatus }}</span>
    {{# } else { }}
    <span style="color: #ee0808;">{{ d.roomStatus }}</span>
    {{# } }}
    </script>
</script>

<script>
    layui.use(['form', 'table'], function () {

        var table = layui.table,
            form = layui.form,
            $ = layui.jquery;
        
            
        // 暂时不用token
        var token = JSON.parse(localStorage.getItem("token"));

        $.ajaxSetup({
            // 发送cookie
            xhrFields: {
                withCredentials: true
            },
        })
        // var token = JSON.parse(localStorage.getItem("token"));

        //渲染数据表格
        table.render({
            elem: '#roomTable',    //  渲染的数据表格的id
            //url:'rooms.json'
            url:'http://localhost:8080/room/roomSelect'    //数据表格的数据源 
            //,headers:{"token":token}
            , title: '学员列表'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            //, contentType: "application/x-www-form-urlencoded"
            , cols: [[
                { type: 'checkbox', fixed: 'left' }
                , { field: 'roomId', title: '房间号', width: 120, fixed: 'left', unresize: true, sort: true }
                , { field: 'price', title: '住宿费用', width: 120, edit: 'text' }
                , { field: 'roomStatus', title: '房间状态', width: 120, edit: 'text', templet:'#titleTpl'}
                , { field: 'roomType', title: '房间类型', width: 120, edit: 'text' }
                , { field: 'giftType', title: '订房赠品', width: 300, edit: 'text' }
            ]]
            , page: true        // 开启分页   自动向 后台传参    page   limit
        })


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('roomTable', {
                //url: "/roomsPageData",
                page: {
                    curr: 1
                }
                , where: {
                    "roomId":data.field.roomId,
                    "price":data.field.price,
                    "roomStatus":data.field.roomStatus,
                    "typeId":data.field.typeId,
                    "roomType":data.field.roomType,
                    // "":data.field.giftId,
                    "giftType":data.field.giftType,
                    //"pic":data.field.pic
                }
            }, true);

            return false;  // 如果 改为 true   ，表格会 再查询一次 ,所以 这里写为 false
        });
    })
</script>
</html>